<template>
	<div class="remote-monitor">
		<el-card shadow="hover" class="monitor-header">
			<div class="monitor-time">当前时间：{{ now }}</div>
		</el-card>
		<el-row :gutter="24" style="margin-top:18px;">
			<el-col :xs="24" :md="12">
				<el-card>
					<div class="line-title">生产线状态分段监控</div>
					<div class="line-visual">
						<div v-for="(seg, i) in segments" :key="i" class="seg-box">
							<div class="seg-label">
								<span :class="['state-dot', seg.state]" :title="seg.stateDesc"></span>
								{{ seg.name }}
							</div>
							<div class="seg-info">
								<span>设备：{{ seg.device }}</span>
								<span>产能：{{ seg.output }}/{{ seg.capacity }}</span>
								<span>批次：{{ seg.batch }}</span>
							</div>
							<el-progress :percentage="seg.progress"
								:status="seg.state == '异常' ? 'exception' : (seg.state == '运行' ? 'success' : 'warning')"
								:stroke-width="14" style="margin:12px 0 2px 0" />
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :md="12">
				<el-card>
					<div class="line-title">设备实时监控</div>
					<div class="device-list">
						<div v-for="dev in devices" :key="dev.id" class="device-box">
							<div>
								<span :class="['state-dot', dev.state]" style="margin-right:4px"></span>
								<b>{{ dev.name }}</b>
							</div>
							<div>温度：{{ dev.temp }} ℃ &nbsp; | &nbsp; 转速：{{ dev.speed }} rpm</div>
							<div>状态：<el-tag :type="dev.state == '异常' ? 'danger' : (dev.state == '运行' ? 'success' : 'warning')"
									size="small">{{ dev.state }}</el-tag></div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 时间
const now = ref('')
function updateTime() {
	const d = new Date()
	now.value = d.toLocaleString()
}
setInterval(updateTime, 1000)
onMounted(updateTime)

// 生产线分段状态模拟
const segments = ref([
	{ name: '投料段', device: '投料机A', state: '运行', stateDesc: '正常运行', output: 2000, capacity: 2500, batch: 'B20240615-1', progress: 80 },
	{ name: '混合段', device: '混合机B', state: '待机', stateDesc: '等待上游', output: 0, capacity: 2500, batch: 'B20240615-1', progress: 0 },
	{ name: '制粒段', device: '制粒机C', state: '运行', stateDesc: '正常运行', output: 1400, capacity: 2500, batch: 'B20240615-1', progress: 56 },
	{ name: '压片段', device: '压片机D', state: '异常', stateDesc: '主轴过载', output: 600, capacity: 2500, batch: 'B20240615-1', progress: 24 },
	{ name: '包装段', device: '包装机E', state: '待机', stateDesc: '等待下游', output: 0, capacity: 2500, batch: 'B20240615-1', progress: 0 }
])

// 设备状态模拟
const devices = ref([
	{ id: 1, name: '压片机D', state: '异常', temp: 48.5, speed: 340 },
	{ id: 2, name: '混合机B', state: '待机', temp: 35.1, speed: 0 },
	{ id: 3, name: '投料机A', state: '运行', temp: 40.3, speed: 295 },
	{ id: 4, name: '制粒机C', state: '运行', temp: 38.6, speed: 220 },
	{ id: 5, name: '包装机E', state: '待机', temp: 36.2, speed: 0 }
])

// 可选：模拟状态动态变化
onMounted(() => {
	setInterval(() => {
		// 简单模拟状态/数值小变化
		devices.value.forEach(dev => {
			if (dev.state === '运行') {
				dev.temp += (Math.random() - 0.5) * 0.3
				dev.speed += Math.round((Math.random() - 0.5) * 8)
				if (dev.temp > 55) dev.state = '异常'
			}
			if (dev.state === '异常' && dev.temp < 47) dev.state = '运行'
		})
	}, 1800)
})
</script>

<style scoped>
.remote-monitor {
	padding: 16px;
	background: #f5f8fc;
}

.monitor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	margin-bottom: 0;
}

.monitor-title {
	font-size: 1.28em;
	font-weight: bold;
	color: #409EFF;
	letter-spacing: 2px;
}

.monitor-time {
	font-size: 1.05em;
	color: #666;
}

.line-title {
	font-weight: bold;
	font-size: 1.1em;
	color: #333;
	margin-bottom: 14px;
}

.line-visual {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.seg-box {
	border: 1px solid #e1eaff;
	border-radius: 8px;
	padding: 8px 16px 4px 16px;
	margin-bottom: 6px;
	background: #fff;
}

.seg-label {
	font-size: 1em;
	font-weight: 500;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
}

.seg-info {
	font-size: 0.95em;
	color: #666;
	margin-bottom: 2px;
	display: flex;
	gap: 20px;
}

.device-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.device-box {
	border: 1px solid #e1eaff;
	border-radius: 7px;
	background: #f8fbff;
	padding: 8px 14px 4px 14px;
}

.state-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	margin-right: 6px;
	vertical-align: middle;
}

.state-dot.运行 {
	background: #67C23A;
}

.state-dot.待机 {
	background: #909399;
}

.state-dot.异常 {
	background: #F56C6C;
	box-shadow: 0 0 6px #f56c6c85;
}
</style>
  
